<!--
字体图标（iconfont）
    - 本质是一种字体
        页面效果展示为图标模样，但它只是一种字体类型而已，不是图片
    - 常用于页面中的小图标
    - 参考资源：
        阿里矢量图库    http://www.iconfont.cn/
        Icomoon字体库    http://icomoon.io/

精灵图的缺陷
    - 图片文件还是比较大的
    - 放大缩小会失真
    - 图片一旦制作完毕，想要修改更换会很复杂

字体图标的优点
    - 轻量级
        字体比图片更小
        页面加载时，字体就渲染出来了，减少了服务器请求
    - 灵活性
        本质是字体，可以随意修改颜色、产生阴影、透明效果、旋转等
    - 兼容性
        几乎所有浏览器都支持
注意：
    字体图标不能完全替换精灵技术
        - 字体图标仅仅是对小图标使用的技术提升、优化
        - 对于结构和样式【复杂】的小图标，使用精灵图
        - 对于结构和样式【简单】的小图标，使用字体图标


使用方式：三种
    1）Unicode
    2）Font class    // 它是Unicode的升级版
    3）Symbol
自己试试阿里的矢量图库吧，dome.html那里讲了所有的用法！

pink老师讲的是icomoon的unicode的用法（如下）

    第一步：引入字体文件
        - 通常习惯放在【项目根文件/fonts/】目录下
        - 在下载包的【fonts】中，有多个字体文件（有的只有1个）
        - 一般有4个，代表4种存储格式（.eot、.svg、.ttf、.woff）
        - 其实都是同一个玩意（类比花名、小名、身份证上的名）
        - 不同存储格式可以被不同浏览器识别解析，解决了兼容性问题

    第二步：全局声明字体样式
        - 在页面中引入css文件的部分内容，参考文件【style.css】
            style{
                @font-face{xxx}    // 只复制这个过来即可，其它不用复制
            }
        - 注意路径问题：与上面的【fonts/】路径有关

    第三步：在指定的html标签（例如span）上添加占位符
        - 占位符是一个矩形框框，在【dome.html】中查看
        - 直接复制【对应】的占位符来用，虽然都长一个样，但它代表的是不同的图标

    第四步：给标签设置我们引入的字体图标所代表的字体类型
        - 字体名字默认是【icomoon】，自己查看css文件
            span {
                font-family: "icomoon";
            }
        - 字体名字可以修改，在@font-face{}里面修改，引用时记得使用修改后的名字

如何追加新的字体图标？
    官网中点击【Import Icons】按钮，
    找到原先下载包中的【selection.json】文件，
    然后在官网中追加并最后下载新的来用即可

字体图标加载原理
    对于精灵图而言，服务器请求的是图片文件；
    对于字体图标而言，服务器请求的是字体文件。
        iconfont.eot
        iconfont.svg
        iconfont.ttf
        iconfont.woff
-->
<style>
  @font-face {
    /* 这里可以修改名字 */
    font-family: "myTest";
    /* 注意fonts的路径 */
    src: url("fonts/icomoon.eot?4s0epa");
    src: url("fonts/icomoon.eot?4s0epa#iefix") format("embedded-opentype"),
      url("fonts/icomoon.ttf?4s0epa") format("truetype"),
      url("fonts/icomoon.woff?4s0epa") format("woff"),
      url("fonts/icomoon.svg?4s0epa#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  span {
    /* 使用我们自己引入的字体 */
    font-family: "myTest";
    color: red;
    font-size: 50px;
  }
</style>

<span></span>
<span></span>
